<template>
    <div class="financialCollection">
        <ul class="tab-ul">
            <li @click="tabnum=1">
                <span>商家收款账户</span>
                <div v-show="tabnum==1" class="line"></div>
            </li>
            <li @click="tabnum=2">
                <span>团长收款账户</span>
                <div v-show="tabnum==2" class="line"></div>
            </li>
        </ul>
        <div class="tab-one" v-if="collectionData.list">
            <el-table :data="collectionData.list" stripe border style="width: 100%" >
                <el-table-column  type="index" width="50" label="序号"></el-table-column>
                <el-table-column v-if="tabnum==1"  prop="shopId"  label="商户编号"></el-table-column>
                <el-table-column v-if="tabnum==1"  prop="shopId"  label="商户名称"></el-table-column>
                <el-table-column v-if="tabnum==2"  prop="siteId"  label="自提点编号"></el-table-column>
                <el-table-column v-if="tabnum==2"  prop="siteId"  label="自提点名称"></el-table-column>
                <el-table-column  prop="cardName"  label="联系人/联系方式"></el-table-column>
                <el-table-column  prop="bank"  label="开户行"></el-table-column>
                <el-table-column  prop="branchName"  label="支行名称" width="80"></el-table-column>
                <el-table-column  prop="cardNumber"  label="银行账号"></el-table-column>
            </el-table>
            <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage4"  :page-sizes="[5, 10, 15, 20]"  :page-size="pageSize"  layout="total, sizes, prev, pager, next, jumper"  :total="collectionData.total"></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tabnum:1,//控制tab切换
            collectionData:'',//获取收款账户列表
            //分页
            currentPage4:1,//跳转到第几页
            page:1,//第几页
            pageSize:5,//每页几条
        }
    },
    mounted(){
        this.getcollectionData()
    },
    methods:{
        //获取收款账户列表
        getcollectionData(){
            var param={
                "page": 0,
	            "pageSize": 0
            }
            var urlcode
            if(this.tabnum==1){
                urlcode='/shopBank/getShopBank'
            }else{
                urlcode='/shopBank/getSiteBank'
            }
            this.axios({
                url:urlcode,
                method:'post',
                data:JSON.stringify(param),
            }).then(res=>{
                this.collectionData=res.data.data
            })
        },
        //分页
        handleSizeChange(val) {
            this.pageSize=val
            this.getcollectionData()
        },
        handleCurrentChange(val) {
            this.page=val
            this.getcollectionData()
        }
    },
    watch:{
        tabnum(){
            this.getcollectionData()
        }
    }
}
</script>

<style scoped>
.financialCollection{
    height: 100%;
}
/* 切换tab */
.tab-ul{
    margin-top: 7px;
    display: flex;
    margin-bottom: 30px;
}
.tab-ul li{
    padding: 20px;
}
.tab-ul li .line{
    margin: 0 auto;
    width: 50px;
    margin-top: 14px;
    height: 2.5px;
    background: rgb(255, 136, 0);
}
/* 面板一 */
.tab-one{
    min-height: calc(100% - 115px );
    position: relative;
}
.el-pagination{
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%);
}
</style>